<template>
  <div
    class="flex w-full mb-6 overflow-hidden"
    :class="[{ 'flex-row-reverse': inversion }]"
  >
    <div
      class="overflow-hidden text-sm"
      :class="[inversion ? 'items-end' : 'items-start']"
    >
      <div
        class="flex items-center gap-2"
        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
      >
        <p
          class="text-xs text-[#b4bbc4]"
          :class="[inversion ? 'text-right' : 'text-left']"
        >
          {{ dateTime }}
        </p>
        <button
          class="copy-btn p-1 px-2 rounded bg-[#f0f2f5]"
          @click="copyContent"
        >
          复制以下内容
        </button>
      </div>
      <div
        class="flex items-end gap-1 mt-2"
        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
      >
        <TextComponent
          ref="textRef"
          :inversion="inversion"
          :error="error"
          :text="text"
          :reasoning="reasoning"
          :loading="loading"
          :as-raw-text="asRawText"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TextComponent from './Text.vue'
import { useClipboard } from '@vueuse/core'
import { ref } from 'vue'
const props = defineProps<{
  dateTime?: string
  text?: string
  reasoning?: string
  inversion?: boolean
  error?: boolean
  loading?: boolean
}>()
const asRawText = ref(props.inversion)
const { copy } = useClipboard()
const copyContent = () => {
  const content = props.text || props.reasoning || ''
  copy(content)
  // 可以添加一个提示，告知用户内容已复制
  alert('内容已复制到剪贴板')
}
</script>

<style lang="scss" scoped>
.copy-btn {
  background-color: #f0f2f5;
  border: none;
  color: #1e293b;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;

  &:hover {
    background-color: #e5e7eb;
  }
}
</style>
